<template>
  <view class="spend">
		<!-- <down-load-app-com ></down-load-app-com> -->
    <nav-com></nav-com>
    <!-- <image class="head" mode="aspectFit" src="https://littleshop.oss-cn-beijing.aliyuncs.com/images/mini/product/hot-past-head.png"></image> -->
		<image class="head" mode="aspectFit" src="/static/images/cah-back-area-bg.png"></image>
    <view class="content" v-if="pageItems.length>0">
			<section-products-list-com :products="pageItems" :isCashBack="isCashBack"></section-products-list-com>
    </view>
  </view>
</template>

<script>
import Pagination from "mixins/Pagination"
import SectionProductsListCom from "components/product/hot/SectionProductsListCom"
import NavCom from "components/common/NavCom"
import {getProductsList} from "api/productApi"
import CurrentUser from "mixins/CurrentUser"
import store from "store"
import { mapGetters } from 'vuex'

export default {
	store,
  name: "spend",
	mixins: [Pagination,CurrentUser],
  components: {
		SectionProductsListCom,
		NavCom
	},
	data(){
		return {
			isCashBack:true
		}
	},
  methods: {
    async loadPageItems() {
      return await getProductsList({
        page: this.pageNumber,
        "filter[is_return_section]": 1
      })
    }
  },
  async onLoad() {
    await this.loadPageData()
  }
}
</script>

<style lang="scss" scoped>
.spend {
  .head {
    width: 750rpx;
    height: 432rpx;
  }
  .content {
    padding: 30rpx;
    background-color: #F6F6F6;
    border-top-left-radius: 30rpx;
    border-top-right-radius: 30rpx;
    position: relative;
    margin-top: -94rpx;
    z-index: 99;
  }
}
</style>
